Rubrikregister

« Tillbaka till hemsidan

JavaScript (JS) guide, tutorial, kurs på svenska.

JavaScript Guide

JavaScript (JS) är ett populärt skript-språk som är mest känt för att köras i Webbläsare. Det är lätt att lära sig, men svårt att bemästra.
JavaScript är det snabbast växande programmerings-språket och många av morgondagens system kommer att vara baserade på JS.

Ett av mina mål med denna guide är att du inte ska behöva några förkunskaper i programmering, men att även de med viss erfarenhet ska ha nytta av den. Kontakta mig gärna om det är något du inte förstår!

Variabler

Speciellt i JavaScript handlar programmering huvudsakligen om att sätta namn på saker och ting. Dessa namn kallas variabler.
I JavaScript är en variabeln en pekare mot ett objekt. Det kan liknas med vägskyltar, där variabeln är skylten och objektet är orten eller vägen.
En variabel pekas med likhetstecken. Exempel:

lösenord = "xYzÅäÖ";

Variabeln lösenord pekas mot objektet "xYzÅäÖ" (en String)

Försök sätta namn som beskriver objekten på ett abstrakt sett. Exempel på bra namn: nyckel, varukorg, rollperson.

När ett objekt inte längre har en pekare hamnar det så småningom på soptippen. Dvs. tas bort från datorns minne.

Olika typer av objekt

Allt i JavaScript är objekt! Urinvånarna String, Number och Boolean kallas primitiva objekt då de inte kan tilldelas attribut eller metoder. Allt annat kallas bara objekt.
De vanligaste objekten förutom de primitiva är Array, Object och Function.
JavaScript utvecklas ständigt. På senare tid har till exempel objekten JSON, Date, Error och RegExp lagts till som standard.

String

text = "Detta är text";

Detta skapar en sträng (String). Variabeln text pekar till text-strängen som får värdet Detta är text

Number

nr = 42;

Detta skapar ett nummer (Number). Variabeln nr pekar till numret, som får värdet 42.

Räknesätt

Med nummer kan man använda plus, minus, gånger, delat och modul-tecken (%).

Ibland används ++ respektive -- för att öka/minska ett tal med ett. Anting före (++nr) eller efter (nr++) talet används. Du bör för tydlighetens skull undvika detta och skriva x = x + 1 i stället, .
Nummer kan även öka/minska med nr+=x och nr-=y

 nr = 40 + (2 * (3 + 2));

Som i de flesta miniräknare beräknas paranteserna först, och börjar med den innersta. Sedan räknas gånger och delat före plus och minus.

Boolean

En Boolean är sant eller falskt. Värdet true är sant, och false är falskt.

djur = true;

Detta skapar ett en Boolean. Variabeln djur pekar till Boolean´en som får värdet true

Array

frukt = ["banan", "äpple", "päron"];

Skapar en lista. Variabeln frukt pekar till listan.

Array har flera användbara metoder. En av dem är Array.push som lägger till ett objekt i listan.

frukt.push("apelsin");

Listan som variabeln frukt pekar mot innehåller nu även strängen "apelsin".

Object

rollperson = {namn: "Kalle", ålder: 25};

Skapar ett objekt som innehåller attributen namn och ålder. Variabeln rollperson pekar till objektet.

Function

Skapar funktioner eller objekt-mallar.

function plussa(talA, talB) {
	return talA + talB;
}

Skapar en funktion som returnerar talA + talB.

parametrar

Variablerna inuti parentesen (talA, talB) är funktionens parametrar

return

Instruktionen return stoppar funktionen och kan returnera ett objekt.

Exekvera / köra

console.log(plussa(1, 2));

En funktion körs genom att skriva funktionens namn samt parenteser (med argumenten i).
Om flera funktioner nästas som i kod-exemplet ovan körs den inre funktionen (i detta fall plussa) först, vars returnerade värde används som argument till funktionen console.log.
Funktionen console.log konverterar argumentet till en text-sträng och skriver ut den i konsolen.

Deklarera variabler

var katt;
var hund; 
var häst = "snäll";

Instruktionen var talar om för JS-motorn att vi kommer använda variablerna katt, hund och häst.
Vi talar dessutom om att häst ska vara en String med texten snäll.

Variabelns definitionsområde

Om en variabel ej deklareras med var, eller deklareras utanför en funktion, kommer den vara tillgänglig i Hela programmet.
Detta bör undvikas då det blir mycket svårare att hålla redan på dem.

Om variabeln deklareras inuti en funktion, kommer den bara vara tillgänglig i den funktionen samt dess under-funktioner (funktion i en funktion). Exempel:

function mamma() {
	var kakor = 3;
	function barn() {
		kakor = kakor - 1;
	}
}
console.log(kakor) // undefined

Det går Inte att komma åt variablen kakor utanför mamma funktionen. Funktionen barn kan dock komma åt kakor - då kakor ligger i samma funktion, eg. samma defintionsområde.

undefined

En variabel som inte pekar mot något objekt får värdet undefined.

let, const

I JavaScript specifikation 6 (2015) introducerades nyckelorden let och const som också kan användas för att deklarera variabler.
Den största skillnaden är att variabler deklarerade med nyckelordet const inte kan pekas om. Och att det inte går att använda let eller const -variabler innan de har deklarerats, man får alltså ett felmeddelande (programmet crashar) i stället för att variabeln får värdet undefined.
Det går heller inte att använda en variabel som har deklarerats i ett annat kod-block, lika som var -variabler inte är tillgängliga utanför den funktion de har deklarerats i.
let fungerar även på ett speciellt sätt i for-loopar och skapar en ny variabel för varje loop, jämfört med var som använder samma variabel.

Attribut och metoder

Objekt kan tilldelas variabler som pekar till andra objekt. Dessa variabler kallas metod om den pekar mot en funktion, eller attribut om den pekar mot något annat.

var frukt = ["banan", "äpple", "päron"];

console.log("Antal frukter: " + frukt.length);

frukt.push("appelsin");

Array.length är ett attribut (Number) som håller reda på antal poster i en Array.
Array.push är en metod (Function) som lägger till en post i en Array.

Alla objekt (förutom de primitiva) kan tilldelas metoder och attribut.

var kortlek = ["Hjärter ess", "Hjärter kung", "Hjärter dam"];

kortlek.blanda = function() {

}

Variabeln kortlek pekas mot en ny Array med String:arna "Hjärter ess", "Hjärter kung", "Hjärter dam".
Objektet kortlek tilldelas metoden blanda.

Kommentarer

får = lamm; // fåret är ett lamm

/*
	får får får?
	
	nej, får får lamm!
*/

// är en kort kommentar som bara kommenterar en rad.
/* kommenterar alla rader tills den slutar med */

new

Instruktionen new används för att skapa ett nytt objekt.

De inbyggda objekten Object, Array, String, Number, Boolean och Function är speciella eftersom instruktionen new inte behöver användas för att skapa dem.
Måsvingarna { } skapar ett Object.
Klamrarna [ ] skapar en Array.
Hartassarna " " skapar en String.
För att skapa ett Number behövs bara en ett tal!
Och för att skapa en Boolean: Skriv true eller false.

var kalle = {};
kalle.favoritmat = ["pizza", "tacos", "fiskpinnar"];
kalle.namn = "Kalle";
kalle.ålder = 18;
kalle.kille = true;

På övriga objekt måste instruktionen new användas. (Eller funktionen Object.create)

var datum = new Date();

var moppen = new Moppe();

Objekt-mallar

Det går att skapa objekt-mallar med Function. Instruktionerna i funktionen kallas konstruktions-instruktioner. Dessa körs när objektet skapas med nyckelordet new.

Objekt-mallar kallas ibland för klasser.

function Moppe() {
	var moppe = this;
	moppe.modell = "Yamaha";
}

Funktionen Moppe är en funktion. Men när den används som objekt-mall kallas den konstruktions-funktion (Engelska: constructor).
Genom nyckelordet this kan attribut och metoder tilldelas objektet. Ett tips är att skapa en variabel och peka den mot this som jag har gjort.

Skapa ett nytt objekt

var minMoppe = new Moppe();

En ny Moppe skapas! Variabeln minMoppe pekar mot ett nytt Moppe-objekt som skapas med konstruktions-instruktionerna i Moppe funktionen.

console.log(minMoppe.modell);

Attributet minMoppe.modell skrivs ut i konsolen.

Om du inte behöver en mall, är det bättre att använda Object för att skapa ett objekt!

var värld = {};
värld.spelare = [];

function Spelare() {};

// En ny spelare stiger in
värld.spelare.push(new Spelare());

Funktion eller objekt-mall ?

Notera att både objekt-mallar och funktioner skapas med Function!
Döp därför objekt-mallar med Stor initial och funktioner med s liten initial för att skilja på dem.

I JavaScript specifikation 6 (2015) kan man även skapa objekt-mallar med nyckelordet Class:

Class Moppe {
  constructor() {
	var moppe = this;
	moppe.modell = "Yamaha";
  }
}

Prototype

Objekt kan dela attribut och metoder med andra likadana objekt genom dess prototyp.

Moppe = function() {
	var moppe = this;
	moppe.modell = "Yamaha";
	moppe.växel = 1;
}
Moppe.prototype.gasa = function() {
	var moppe = this;
	console.log("Javvlar va fort det går med " + moppe.modell + "!");
}
Moppe.prototype.växlar = 5;

Moppe.prototype.gasa pekar mot en funktion som kör console.log.
Alla Moppe objekt kommer dela metoden gasa och ha 5 växlar.

Prototype eller Metod ?

Om en metod tilldelas i objektets konstruktions-funktion får den tillgång till konstruktions-funktionens lokala variabler. En liten nackdel med detta är dock att metoden skapas om igen varje gång ett nytt objekt skapas med hjälp av mallen/konstruktions-funktionen. Det är alltså mer effektivt (mindre minne och dator-resurser används) om du använder prototype, men det har liten effekt på grund av att dagens datorer är så snabba.

Moppe = function() {
	var moppe = this;
	var modell = "Yamaha";
	moppe.gasa = function() {
		console.log("Javvlar va fort det går med " + modell + "!");
	}
}

Logiska operationer

Jämföra objekt

Objekt jämförs med två eller tre likhetstecken:

var svaret = "42"; // String object

console.log(svaret == 42); // true
console.log(svaret === 42); // false (ej samma typ)

Ett likhetstecken pekar en variabel mot ett objekt.
Två likhetstecken jämför värdena mellan två objekt.
Tre likhetstecken kollar om objekten är av samma typ samt jämför värdena.

Det går endast att jämföra primitiva objekt.
Övriga objekt är endast lika om båda variablerna pekar mot det.

var lista1 = [1, 2, 3], // Ny Array
var lista2 = [1, 2, 3], // Ny Array
var lista3 = lista1;

console.log(lista1 == lista2); // false, pekar mot olika objekt
console.log(lista1 == lista3); // true, pekar till samma objekt

INTE

console.log(1 != 2); // true
console.log("1" !== 1); // true (ej samma typ)

Utropstecken används för negation (ex: negationen till true är false). Exempel:

var sanning = !true;
console.log(sanning); // false

Försök undvika negationer och variabelnamn så som "ejSant" och "inteSnällt". Och undvik alltid dubbla negationer (sanning=!!false) eller (if(!inteInloggad)).
Två utropstecken !! kallas för "BANG BANG" och används ibland för att förvandla ett objekt till en Boolean.

OCH

var hund = true;
var katt = true;
var hamster = false;

console.log(hund && katt); // true
console.log(hund && katt && hamster); // false

ELLER

var hund = true;
var katt = true;
var hamster = false;

console.log(hund || hamster); // true
console.log(hund || katt || hamster); // true

true || false (Sant eller falskt?)

En variabel som har definierats, inte är en tom text-sträng, och inte talet noll, blir true i logiska operationer.
Talet noll, strängarna "0" och "", samt undefined blir false.

if(namn) {
	console.log("Hej " + namn)
}
else { // Namn är antingen "", "0", eller undefined
	console.log("Du måste fylla i namn!");
}

Kontrollera flödet

if

if(namn) {
	console.log("Hej " + namn)
}

else if

if(!namn) {
	console.log("Du måste fylla i namn!")
}
else if(namn.length < 4) {
	console.log("Ditt namn är för kort!");
}
else {
	console.log("Hej " + namn);
}

x ? y : z

Kallas för "Trefaldig" (Engelska: ternary) operation: En förkortning av if ... else.

console.log("God afton " + (man ? "herr " : "fru ") + namn);

Om man är true används "herr ", annars används "fru ".

Loopar

En loop (ibland kallad snurror) kör kod flera gånger.
Instruktionen break avbryter en loop.

for

var hundraser = ["Labrador", "Schäfer", "Pudel", "Chihuahua"]
for(var i=0; i<hundraser.length; i++) {
	console.log(hundraser[i]);
}

I parentesen i for ska det finnas tre kommandon separerade med semikolon ;

  1. Det som ska köras innan loopen startar
  2. Loopen snurrar så länge detta värde är true.
  3. Kod som ska köras efter varje varv.

for in

Förenklad variant av for:

var rollperson = {namn: "Kalle", ålder: "25"}
for(var egenskap in rollperson) {
    console.log(egenskap + ": " + rollperson[egenskap]);
}

while

Loopen snurrar så länge värdet i parentesen är true.

while(i < 10) {
    i = i + 1;
    console.log(i);
}

I kod-exemplet ökas i med ett och skrivs sedan ut i konsolen.

Loopa Array:er

I version 5 (ES5, ca år 2014) av EcmaScript (ES) /JavaScript-standard lades forEach och map m.fl. till i prototype för Array. Om din JavaScript-motor har stöd för ES5 kan forEach med fördel används för att loopa igenom en Array.

hundraser.forEach(visaRas);

function visasRas(ras) {
    console.log(ras);
}

Switch

Styr om flödet baserat på ett värde.

switch(riktning) {
    case "upp":     y++;   break;
    case "ner":     y--;
    case "höger":   x++;   break;
    case "vänster": x--;   break;

    default:        y++;   break;
}

Koden efter varje case körs fram till instruktionen break.
Notera att ett fel har smugit sig in i exempel-koden! Det saknas en break efter case "ner" vilket resulterar i att både y-- samt x++ körs när riktning är "ner".

En switch kan ha ett default som körs om riktning inte matchar något case.

Överväg alltid att använda else if i stället för en switch!

Semikolon

Varje sats bör avslutas med ett semikolon ;

Om ett fel uppstår på grund av att du glömt semikolon, provar javascript-motorn att sätta in ett semkilon i slutet av raden, därför går det att skriva JavaScript utan att avsluta satserna med semikolon!

Semikolon ska placeras efter att variabler deklareras, funktioner körs, eller objekt tilldelas attribut eller metoder.

Semikolon ska INTE placeras efter logiska operationer, flöden eller funktions-konstruktioner.

Blanktecken

Tack vare semikolon kan du sätta in blanktecken (mellanslag, tabbar och radbrytningar) i koden för att göra den lättare att läsa.
Hur blanktecken ska användas är en evig debatt. Försök hitta ett mönster som passar dig. Men anpassa dig om du ändrar i någon annans kod!

Skapa egna program

Verktyg

Din favorit text-editor samt en webbläsare eller Node JS

Prova gärna min online-text-editor! Jag rekommenderar annars notepad++ eller Sublime text som text-edtior, samt Opera, Chromium eller Firefox som webbläsare.

Med en webbläsare

Kopiera koden nedanför och spara den som "hej.htm".

<script>

console.log("Hej på dig!");

</script>

Öppna filen i webbläsaren. Högerklicka och välj inspect element, och fliken Console

Du borde nu se meddelandet Hej på dig!
Prova ändra koden, och ladda om sidan (tryck F5 på tangentbordet).

Med Node JS

Kopiera koden nedanför (samma som för webbläsaren, fast utan script-taggarna). Och spara filen som "hej.js".

console.log("Hej på dig!");

Öppna en konsol/terminal ... Om du har windows: Klicka på start > kör, skriv in "cmd" och tryck på enter. På Mac eller Linux, gå in på Program > (Tillbehör) > Terminal

Navigera till den katalog du sparade filen i. Skriv kommandot cd i konsolen för att byta mapp.
Om du lagt filen på skrivbordet (Windows) skriv cd %userprofile%/desktop och tryck enter.

Skriv node hej.js i konsolen.

Du borde nu se meddelandet Hej på dig!

Om det står ogiltigt kommando, program eller liknande måste du lägga till node.exe i miljö-variablerna (PATH). Eller kopiera över node.exe till samma mapp som du har .js filen.

Lägga till sökvägen till node.exe i miljö-variablerna (PATH) för Windows 7

Start > kontrollpanelen > System och Säkerhet > System > Avancerade inställningar > miljövariabler.

Lägg till en variabel som heter PATH om den inte redan finns. Skriv in sökvägen till node.js (med ett semikolon ; framför)

Fördjupning

Övningsuppgifter

Svaret på allt

Du har blivit ombedd att skapa en funktion som ger svaret på allt!
Skapa funktionen svaret som returnerar talet 42.


Webbshoppen

Företaget som du jobbar för har levererat en ny Webshopp till en kund.
Kunden är dock arg för att det är något fel i kassan! Slutsumman blir fel!
Ditt uppdrag är att hitta felet och åtgärda det snarast möjligt.


Luftvärns-laser-system

Ett hemligt vapenföretag har utvecklat ett nytt laser-system för att skjuta ner flygande mål.
Det fungerar bra så länge positionen är 0,0 men när de flyttar pjäsen skjuter den åt fel håll!
De har anlitat dig för att uppdatera mjukvaran i luftvärns-systemet.


Kuriosa

En full JavaScript referens finns tillgänglig på Engelska hos Mozilla, W3-schools, eller Dev-guru.

Varumärket JavaScript ägs av Oracle, efter uppköpet av Sun, som utvecklade JavaScript i samarbete med Mozilla. De utvecklade språket för att köras i Mozilla's gamla webbläsare "Netscape Navigator", som i dag kallas Firefox.
JavaScript blev så populärt att även andra webbläsare var tvungna att implementera det. JavaScript kallas i bland för JS-script, J-script, eller bara JS för att undvika problem med varumärket.

ECMA-script-gruppen är ansvariga för JavaScript standarden.
Men det är helt fritt hur JS implementeras.
Flera företag tävlar om att skapa den snabbaste JS-motorn vilket har gjort att JS blivit mycket snabbt och fått många optimeringar.

Ordlista

Denna kurs är skriven av Johan Zetterberg.


Följ mig via RSS:   RSS https://zäta.com/rss.xml (ange adressen i din feed-läsare)